<template>
	<view>
		<global-contact></global-contact>
		<view class="headImg">
			<image :src="showImg + detailInfo.img" mode="aspectFit"></image>
		</view>
		<view class="info">
			<view class="title">{{ detailInfo.title }}</view>
			<view class="subTit">
				<view class="item">
					<text>活动时间：</text>
					<text>{{ detailInfo.activity_time }}</text>
				</view>
				<view class="item">
					<text>适合人数：</text>
					<text>{{ detailInfo.people_number }}</text>
				</view>
			</view>
			<view class="subTit tit">
				<text>使用道具：</text>
				<text>{{ detailInfo.props }}</text>
			</view>
			<view class="subTit tit prop">
				<text style="white-space: nowrap;">项目目的:</text>
				<view class="list" v-if="detailInfo.purpose">
					<block v-for="(item, index) in detailInfo.purpose.split('、')" :key="index">

						<text v-if="item">{{ item }}</text>
					</block>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="cont">
				<view class="name">项目简介</view>
				<mp-html :content="detailInfo.abstract" />
			</view>
			<view class="cont">
				<view class="name">项目规则</view>
				<mp-html :content="detailInfo.planning" />
			</view>
			<view class="cont">
				<view class="name">目的及意义</view>
				<mp-html :content="detailInfo.purpose_meaning" />
			</view>
		</view>
		<!-- 新加相关视频 -->
		<block
			v-if="detailInfo && detailInfo.associated && JSON.stringify(detailInfo.associated) != '[]' && detailInfo.associated.video && detailInfo.associated.video.length > 0">
			<view class="aboutVideo">
				<view class="aboutCate">相关视频</view>
				<view class="about_item" style="position: relative;"
					v-for="(item, index) in detailInfo.associated.video" :key="index">
					<image mode="aspectFill" :src="showImg + item.img"></image>
					<view class="about_txt">{{ item.title }}</view>
					<image
						style="width: 92rpx;height: 92rpx;position: absolute;top: 0;right: 0;bottom: 0;left: 0;margin: auto;z-index: 999;"
						src="https://www.atuanjian.com/appletStatic/static/play.png" mode="aspectFill"></image>
				</view>
			</view>
		</block>
		<!-- 底部 -->
		<view class="kong"></view>
		<view class="footer">
			<view class="wrap_box">
				<view class="item" @click="toIndex()">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i1.png" mode=""></image>
					<text>首页</text>
				</view>
				<view class="item">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i2.png" mode=""></image>
					<text>客服</text>
					<button type="default" open-type="contact"></button>
				</view>
				<!-- 		<view class="item" @click="makeCall">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i3.png" mode=""></image>
					<text>立即致电</text>
				</view>
				<view class="item" @click="shareData">
					<image src="https://www.atuanjian.com/appletStatic/static/detail/i4.png" mode=""></image>
					<text>立即分享</text>
				</view> -->
				<view class="item" @click="handleNavCar">
					<image src="https://www.atuanjian.com/appletStatic/static/images/u-21.png" mode=""></image>
					<text>购物车</text>
				</view>
				<!-- <view class="submit" @click="orderSource">立即预定</view> -->
				<view class="btn-box">
					<view class="btn-box-1" @click="handleCar">加入购物车</view>
					<view class="btn-box-1" style="background-color: #FFBB50;" @click="handleShop">立即购物</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import mpHtml from 'mp-html/dist/uni-app/components/mp-html/mp-html'

import {
	detailselection, addCard, trainingSelectionDetail, activityReleaseSelectionDetail, meetingSelectionDetail, selectionShare, meetingSelectionShare, trainingSelectionShare, activityReleaseSelectionShare
} from '@/utils/request.js'
export default {
	data() {
		return {
			id: '',
			showImg: '',
			product_type: 7,
			detailInfo: {},
			title: '',
			obj: { 36: '团建项目', 50: '会议物料', 49: '内训精选', 52: '少年培训' }
		}
	},
	components: {
		mpHtml
	},
	methods: {
		async meetingSelectionDetail(data) {
			return await meetingSelectionDetail(data)
		},
		async trainingSelectionDetail(data) {
			return await trainingSelectionDetail(data)
		},
		async activityReleaseSelectionDetail(data) {
			return await activityReleaseSelectionDetail(data)
		},
		async addCard(data) {
			return await addCard(data)
		},
		async selectionShare(data) {
			return await selectionShare(data)
		},
		async meetingSelectionShare(data) {
			return await meetingSelectionShare(data)
		},
		async trainingSelectionShare(data) {
			return await trainingSelectionShare(data)
		},
		async activityReleaseSelectionShare(data) {
			return await activityReleaseSelectionShare(data)
		},
		handleNavCar() {
			uni.navigateTo({
				url: '/pagesB/shopCar/shopCar'
			})
		},
		handleCar() {
			if (!uni.getStorageSync('userInfo')) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return uni.navigateTo({ url: '/pagesB/login/login' })
			}
			const data = { user_id: JSON.parse(uni.getStorageSync('userInfo')).id, product_id: this.id, type: this.product_type }
			this.addCard(data).then(res => {
				uni.showToast({
					title: '添加成功'
				})
			})
		},
		handleShop() {
			if (!uni.getStorageSync('userInfo')) {
				uni.showToast({
					title: '请先登录',
					icon: 'none'
				})
				return uni.navigateTo({ url: '/pagesB/login/login' })
			}
			uni.navigateTo({
				url: '/pagesB/shopCar/pay?order_type=' + 2 + '&product_id=' + this.id + '&product_type=' + this.product_type
			})
		},
		async detailselection(data) {
			return await detailselection(data)
		},
		getDetail() {
			let data = {
				id: this.id
			}
			let http = ''
			if (this.title === '团建项目') {
				http = this.detailselection(data)
			} else if (this.title === '会议物料') {
				http = this.meetingSelectionDetail(data)
			} else if (this.title === '内训精选') {
				http = this.trainingSelectionDetail(data)
			} else if (this.title === '少年培训') {
				http = this.activityReleaseSelectionDetail(data)
			}
			http.then(res => {
				this.detailInfo = res
				uni.setNavigationBarTitle({ // 调用uni-app提供的API设置导航栏标题
					title: res.title // 自定义标题内容
				})
			})
			// http
		}
	},
	onLoad(option) {
		this.showImg = this.$config.showImgApi;
		console.log(option, 'option')
		if (option.scene) {
			const detailStr = decodeURIComponent(option.scene);
			const params = {};
			detailStr.split('&').forEach(item => {
				const [key, value] = item.split('=');
				params[key] = value;
			});
			console.log('params:', params)
			this.id = params['id'];   // "354"
			let type = params['type']; // 如果你要设置 title 为 type 的值
			this.title = this.obj[type]
		} else {
			this.id = option.id
			this.title = option.title
		}
		this.getDetail()
	},
	onShareAppMessage(res) {
		let data = {
			id: this.id
		}
		let http = ''
		if (this.title === '团建项目') {
			http = this.selectionShare(data)
		} else if (this.title === '会议物料') {
			http = this.meetingSelectionShare(data)
		} else if (this.title === '内训精选') {
			http = this.trainingSelectionShare(data)
		} else if (this.title === '少年培训') {
			http = this.activityReleaseSelectionShare(data)
		}
		http.then(res => { })
		return {
			title: this.detailInfo.title,
			path: `/pagesA/detail/selection?id=${this.id}`,
			imageUrl: this.showImg + this.detailInfo.img
		}
	},
	onShareTimeline(res) {
		return {
			title: this.detailInfo.title,
			path: `/pagesA/detail/selection?id=${this.id}`,
			imageUrl: this.showImg + this.detailInfo.img
		}
	},
}
</script>

<style lang="scss">
.kong {
	width: 100%;
	height: 120rpx;
}

.aboutVideo {
	background-color: #FFFFFF;
	padding: 0 30rpx;

	.aboutCate {
		font-size: 30rpx;
		text-align: center;
		font-weight: bolder;
		line-height: 70rpx;
	}

	.about_item {
		text-align: center;
		margin-bottom: 20rpx;

		image {
			width: 690rpx;
			height: 440rpx;
		}

		.about_txt {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: left;
			font-size: 34rpx;
			line-height: 60rpx;
		}
	}
}

.headImg {
	width: 750rpx;
	height: 400rpx;

	image {
		display: block;
		width: 100%;
		height: 100%;
	}
}

.info {
	padding: 20rpx;

	.title {
		font-size: 40rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 32rpx;
		color: #1A1A1A;
	}

	.subTit {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		margin-top: 20rpx;

		.item {
			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 40rpx;
				color: #1A1A1A;
			}
		}
	}

	.tit {
		justify-content: flex-start;

		text {

			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			line-height: 40rpx;
			color: #1A1A1A;
		}
	}

	.prop {
		align-items: flex-start;
	}
}

.list {
	display: flex;
	flex-flow: row wrap;

	text {
		padding: 3rpx 8rpx;
		background-color: #FFB850;
		border-radius: 2px;
		margin: 0 10rpx;
		font-size: 12px;
		font-family: PingFang SC;
		font-weight: 400;
		color: #FFFFFF !important;
		margin-bottom: 8rpx;
	}
}

.content {
	padding: 10rpx 20rpx;

	.cont {
		.name {
			margin-bottom: 5rpx;
			font-weight: bold;
			padding-bottom: 6rpx;
			border-bottom: 4rpx solid #FFB850;
		}
	}
}

.footer {
	width: 750rpx;
	height: 104rpx;

	.wrap_box {
		border-top: 1px solid #F5F5F5;
		background-color: #FFFFFF;
		padding: 24rpx 0;
		width: 750rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 999;
		padding-left: 30rpx;
		@include flex_style(space-between, center, row nowrap);

		.btn-box {
			border-radius: 448rpx;
			height: 76rpx;
			@include flex_style(start, center, row nowrap);
			border-radius: 64rpx;
			overflow: hidden;
			margin-right: 48rpx;

			.btn-box-1 {
				width: 224rpx;
				height: 100%;
				background-color: #333333;
				text-align: center;
				line-height: 76rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}

		.item {
			@include flex_style(center, center, column nowrap);
			position: relative;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-bottom: 4rpx;
			}

			text {
				font-size: 22rpx;
				font-family: PingFang SC;
				font-weight: 400;
				line-height: 32rpx;
				color: #1A1A1A;
			}

			button {
				position: absolute;
				top: 0;
				left: 0;
				width: 88rpx;
				height: 84rpx;
				opacity: 0;
			}
		}

		.submit {
			width: 270rpx;
			height: 104rpx;
			background: linear-gradient(180deg, #FFB850 0%, #FF8000 100%);
			line-height: 104rpx;
			text-align: center;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}
	}
}
</style>